<template>
  <div class="login-form">
    <van-form>
    <div class="login-field">
      <van-field
      v-model="admin"
      type="text"
      name="tel"
      :border="false"
      :placeholder="phdContent"
      class="login-ipt"
    >
      <template #button v-if="isShowSendCode">
        <van-button size="small" type="primary" @click="sendCode">{{ codeText }}</van-button>
      </template>
    </van-field>
      <van-field
      v-model="password"
      :type="iptType"
      name="密码"
      placeholder="密码"
      autocomplete
      :border="false"
      class="login-ipt"
      center
      v-if="props.isShowPassword"
    >
      <template #button>
        <div class="password-switch">
          <van-switch
          v-model="checked"
          @click="showPassword"
          :class="{ 'van-switch--on': checked}"
          active-color="#02a774"
        />
        </div>
      </template>
    </van-field>
      <van-field
      v-model="checkCode"
      name="code"
      placeholder="验证码"
      :border="false"
      class="login-ipt"
    >
      <template #button v-if="isShowRandomCode">
        <div class="random-code" @click="getRandomCode">{{randomCode}}</div>
      </template>
    </van-field>
    </div>
    <div class="login-tips" v-if="isShowTips">
      <div class="login-tips-text">
        温馨提示：未注册硅谷外卖帐号的手机号，登录时将自动注册，且代表已同意
        <span class="login-SAL">《用户服务协议》</span>
      </div>
    </div>
    <div class="login-btn">
      <van-button block type="success" native-type="submit" @click="loginSubmit">
        登录
      </van-button>
    </div>
  </van-form>
</div>
<TipPopup :tipText="tipText" :isShow="isShow" @colse-tip="closeTip"/>
</template>

<script setup>
import router from '@/router'
import { defineProps, ref, computed } from 'vue'
import TipPopup from './login-tip.vue'
const props = defineProps({
  isShowPassword: {
    type: Boolean,
    default: false
  },
  isShowTips: {
    type: Boolean,
    default: false
  },
  phdContent: {
    type: String,
    default: '手机号'
  },
  isShowSendCode: {
    type: Boolean,
    default: false
  },
  isShowRandomCode: {
    type: Boolean,
    default: false
  },
  index: {
    type: Number,
    default: 0
  }
})
const checked = ref(false)
const isShow = ref(false)
const tel = ref(null)
const timerFlag = ref(false)
const checkCode = ref(null)
const codeText = ref('发送验证码')
let codeCd = 5
const username = ref(null)
const tipText = ref('手机号不正确')
const password = ref('')
const regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
const admin = props.index === 0 ? tel : username
const randomCode = ref(Math.random().toString(36).substr(2).slice(0, 4))
const iptType = computed(() => {
  return checked.value ? 'text' : 'password'
})
const showPassword = () => {
  console.log(props.index)
}
// 关闭提示
const closeTip = (value) => {
  isShow.value = value
}
// 获取随机验证码
const getRandomCode = () => {
  randomCode.value = Math.random().toString(36).substr(2).slice(0, 4)
}
const checkedAdmin = () => {
  console.log()
  if (admin.value === 'admin' && password.value === '123456' && checkCode.value === randomCode.value) {
    router.back()
  } else {
    tipText.value = '用户名或密码不正确'
    isShow.value = true
  }
}
const loginSubmit = () => {
  if (props.index === 0) {
    if (admin.value.trim() === '') {
      tipText.value = '手机号不能为空'
      isShow.value = true
    } else if (!regTel.test(admin.value)) {
      tipText.value = '手机号格式不正确'
      isShow.value = true
    }
  } else {
    // 校验手机/邮箱/用户名
    checkedAdmin()
  }
}
// 发送验证码
const sendCode = () => {
  if (timerFlag.value) return
  const timer = setInterval(() => {
    timerFlag.value = true
    codeText.value = `${codeCd}秒后重新发送`
    codeCd--
    if (codeCd < 0) {
      clearInterval(timer)
      codeText.value = '发送验证码'
      codeCd = 5
      timerFlag.value = false
    }
    console.log(codeCd)
  }, 1000)
}
</script>

<style lang="less" scoped>
.login-form {
  margin: 0 2em;
  .van-cell {
    padding: 10px;
  }
  :deep(.van-field__value) {
    .van-field__control {
      height: 3em;
      border: 1px solid #ccc;
      border-radius: 0.2em;
      padding-left: 20px;
    }
  }
  .login-tips {
    width: 100%;
    .login-tips-text {
      font-size: 14px;
      color: #999;
    }
    .login-SAL {
      color: #02a774;
    }
  }
}
.login-btn {
  margin-top: 30px;
}
.login-ipt {
  .random-code {
    margin-right: 10px;
    color: #FFF;
    width: 130px;
    height: 50px;
    font-size: 35px;
    border-radius: 8px;
    text-align: center;
    background-color: #02a774;
  }
 :deep(.van-field__value) {

   .van-field__body {
     position: relative;
     .van-field__button {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      .password-switch {
        position: relative;
      }
      .van-switch {
        position: absolute;
        top: -18px;
        right: 0;
        width: 88px;
        height: 36px;
        .van-switch__node {
          width: 36px;
          height: 36px;
          top: 0;
          left: 0;
        }
      }
      .van-switch--on .van-switch__node {
        transform: translate(50px);
        &::before {
          content: 'abc';
          position: absolute;
          top: -4px;
          right: 48px;
          font-size: 16px;
          color: #fff;
        }
      }
      button {
        color: #999;
        background-color: #fff;
        border: 0;
      }
    }
   }
  }
}
</style>
